<template>
  <div class="container">
    <div class="navLeft">
      <img src="../assets/images/logo-header.png" alt />
    </div>
    <div class="navCenter">
      <input type="text" placeholder="搜索课程" />
      <button>
        <a-icon type="search" />搜索
      </button>
    </div>
    <div class="navRight" >
      <div class="shopcar" @click="open">
        <a-icon type="shopping-cart" class="icon" />
      </div>
      <div class="cell"></div>
      <div @click="personal">

        <a-dropdown v-if="login"  >
          <a class="ant-dropdown-link" @click="e => e.preventDefault()">
            <span  class="text">{{login.nickname}}</span>
          </a>
          <a-menu slot="overlay">
            <a-menu-item  >
              <a href="javascript:;">个人中心</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">我的课程</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">我的订单</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:; " @click="exit"> 退出登录</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
        <span v-else>登录/注册</span>
        <span class="user">
           <img :src="login.portrait" v-if="login" class="img111">
             <a-icon type="user" class="icon1" v-if="!login" />
            </span>      
      </div>
    </div>
    
  </div>
</template>

<script>
import {mapState} from "vuex";
import {exitLogin} from "../utils/exitLogin"
export default {
  computed: {
    // 可以写一些其他的计算属性
    ...mapState({
      // title: state => state.title
      // title: "title"
      login: state => {
        return state.login;
      },
      // isLogin:"isLogin"
    })
  },
  methods:{
    open(){
      if(!this.login){
        this.$store.commit("change",true)
      }else{
        console.log("让他进购物车页面")

        this.$store.commit(" loginStatus",true)
        this.$router.push("/shopcar")
      }
    },
    personal(){
      if(!this.login){
        this.$store.commit("change",true)
      }else{
        console.log("让他进个人页面")
        console.log(this.login)
      }
    },
    exit(){
      exitLogin().then(res=>{
        console.log(res)
        //退出登录成功
        if(res.data.code==0) {
          //清空用户信息
          this.$store.commit("login", null)
          //设置登录状态
          this.$store.commit("loginStatus", false)
          this.lll=this.lll+1
        }
      })

    }

  },
  data(){
    return {
      llll:0
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  justify-content: space-between;
  height: 106px;
  width: 100%;
}
.navLeft {
  img {
    height: 55px;
    margin-top: 22px;
  }
}
.img111{
  height: 32px;
  width: 32px;
  border-radius: 50%;
}
.text{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  width: 80px;
  height: 16px;
  cursor: pointer;
  color: black;
}
.navCenter {
  width: 400px;
  display: table;
  /*margin-left: -160px;*/
  input {
    outline: none;
    border: 1px solid #ccc;
    margin-top: 30px;
    float: left;
    width: 316px;
    height: 38px;
    padding-left: 12px;
    border-radius: 20px 0 0 20px;
    border-collapse: separate;
    border-spacing: 0;
  }
  button {
    margin-top: 30px;
    height: 38px;
    width: 83px;
    // margin-left: -81px;
    margin-left: -1px;
    border-radius: 0px 20px 20px 0px;
    border: none;
    background-color: #00cf8c;
    color: #fff;
    outline: none;
  }
}
.navRight {
  height: 106px;
  width: 185px;
  margin-top: 30px;
  margin-right: 40px;
  div {
    float: left;
    font-size: 13px;
    .icon {
      font-size: 24px;
    }
    .icon1 {
      font-size: 14px;
      color: #fff;
    }
  }
  .cell {
    margin: 6px 10px;
    height: 18px;
    position: relative;
    top: -0.06em;
    display: inline-block;
    width: 1px;
    vertical-align: middle;
    background: #e8e8e8;
  }
}
.user{
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    display: inline-block;
    border-radius: 50%;
    background-color: #ccc;
    margin-left: 4px;
}
.shopcar{
    margin-top: 3px;
}
</style>